import React from 'react';
import { Input, Dialog, Form, Field } from '@teamix/ui';
import './index.scss';
import intl from '../../locale';

const { Inner } = Dialog;

export default class Panel extends React.Component {
  constructor(props) {
    super(props);
    this.field = new Field(this);
    this.state = {};
  }

  handleSubmit = () => {
    this.field.validate((errors) => {
      if (!errors) {
        const formData = this.field.getValues();
        this.props.checkOrgAliasName(formData);
      }
    });
  };

  pathValidator = (rule, value, callback) => {
    if (/^[a-z0-9_][a-z0-9_-]{0,}$/.test(value)) {
      callback();
    } else {
      callback(
        intl.get({
          id: 'code-assets.components.aliasName.panel.ItCanOnlyContainLowercase',
          defaultMessage: '只能包含小写字母、数字、"_"、"-"，且仅可以小写字母、数字、"_"开头',
        }),
      );
    }
  };

  render() {
    return (
      <Inner
        title={intl.get({
          id: 'code-assets.components.aliasName.panel.SetEnterpriseIdentificationName',
          defaultMessage: '设置企业标识名',
        })}
        footer={false}
        className="alias-dialog"
        onClose={this.props.onCancel}
      >
        <Form labelAlign="top" style={{ width: 240 }} field={this.field}>
          <Form.Item
            className="alias-dialog-form-item-sup"
            label={intl.get({
              id: 'code-assets.components.aliasName.panel.EnterpriseIdentificationName',
              defaultMessage: '企业标识名',
            })}
            required
            requiredMessage={intl.get({
              id: 'code-assets.components.aliasName.panel.ThisParameterIsRequired',
              defaultMessage: '该项为必填项',
            })}
            validator={this.pathValidator}
            help={
              this.field.getState('path') === 'error'
                ? this.field.getError('path')
                : intl.get({
                    id: 'code-assets.components.aliasName.panel.ItCanOnlyContainLowercase',
                    defaultMessage:
                      '只能包含小写字母、数字、"_"、"-"，且仅可以小写字母、数字、"_"开头',
                  })
            }
          >
            <Input
              size="small"
              name="path"
              placeholder={intl.get({
                id: 'code-assets.components.aliasName.panel.Enter',
                defaultMessage: '请输入',
              })}
              maxLength={20}
              hasLimitHint
            />
          </Form.Item>
          <Form.Item style={{ marginBottom: 0 }}>
            <Form.Submit onClick={this.handleSubmit} type="primary" style={{ width: '100%' }}>
              {intl.get({
                id: 'code-assets.components.aliasName.panel.Determine',
                defaultMessage: '确定',
              })}
            </Form.Submit>
          </Form.Item>
        </Form>
      </Inner>
    );
  }
}
